<template>
	<div class="user">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>用户管理</el-breadcrumb-item>
				<el-breadcrumb-item>管理用户</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="user-a">
			<!--	搜索框	-->
			<div class="user-search">
				<el-form ref="form" :inline="true" :model="searchForm" label-width="80px" size="medium">
					<el-form-item label="用户分类">
						<el-select v-model="searchForm.user_kind" placeholder="请选择用户分类">
							<el-option v-for="i in usersKinds" :label="i.constant_term_meaning" :value="i.constant_term_id" :key="i.constant_term_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="用户名">
						<el-input v-model="searchForm.user_name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 一堆按钮 新增 删除 -->
			<div class="user-buttons">
				<div>
					<el-button type="primary" size="medium" @click="addUser"><i class="el-icon-plus"></i> 增加</el-button>
				</div>
				<div>
					<el-button type="danger" size="medium" :disabled="delButton" @click="delSelect"><i class="el-icon-delete"></i> 删除</el-button>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="user-table">
				<el-table
					:data="tableData"
					style="width: 100%"
					@selection-change="searchChange">
					<el-table-column
						type="selection"
						width="55px"
						align="center"
						fixed="left">
					</el-table-column>
					<el-table-column
						prop="user_id"
						label="用户id"
						sortable
						width="90px"
						fixed="left">
					</el-table-column>
					<el-table-column
						prop="user_name"
						label="用户名">
					</el-table-column>
					<el-table-column
						prop="user_nickname"
						label="昵称">
					</el-table-column>
					<el-table-column
						prop="user_password"
						label="密码">
					</el-table-column>
					<el-table-column
						prop="user_kind"
						label="用户分类"
						sortable
						width="100px">
					</el-table-column>
					<el-table-column
						prop="user_point"
						label="积分"
						sortable>
					</el-table-column>
					<el-table-column
						prop="user_true_name"
						label="真实姓名">
					</el-table-column>
					<el-table-column
						prop="birthday"
						label="生日"
						sortable
						width="120px">
						<template slot-scope="scope">
							{{scope.row.birthday.substring(0,10)}}
						</template>
					</el-table-column>
					<el-table-column
						prop="register_date"
						label="注册时间"
						sortable
						width="120px">
						<template slot-scope="scope">
							{{scope.row.register_date.substring(0,10)}}
						</template>
					</el-table-column>
					<el-table-column
						prop="sex"
						label="性别">
					</el-table-column>
					<el-table-column
						prop="telephone"
						label="电话"
						width="120px">
					</el-table-column>
					<el-table-column
						prop="user_picture"
						label="照片"
						align="center">
						<template slot-scope="scope">
							<img v-show="scope.row.user_picture" :src="`http://localhost:8080/res/${scope.row.user_picture}`" height="40px"width="40px"/>
						</template>
					</el-table-column>
					<el-table-column
						prop="head_img"
						label="头像"
						align="center">
						<template slot-scope="scope">
							<img :src="`http://localhost:8080/res/${scope.row.head_img}`" height="40px"width="40px"/>
						</template>
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作"
						width="130px"
						align="center">
						<template slot-scope="scope">
							<el-button @click="editClick(scope.row)" type="text" ><i class="el-icon-edit"></i> 编辑</el-button>
							<el-button @click="delClick(scope.row)" type="text" ><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="user-page">
				<el-pagination
					background
					layout="total, sizes, prev, pager, next, jumper"
					:page-sizes="[5,10,15,20]"
					:current-page="currentPage"
					:total="total"
					:page-size="pageSize"
					@size-change="handleSizeChange"
					@current-change="currentChange">
				</el-pagination>
			</div>
			<!-- 增加弹出窗 -->
			<div class="user-dialog" >
				<el-dialog
					title="增加用户"
					:visible.sync="addDialogVisible"
					width="600px"
					top="6vh"
				>
					<div class="user-dialog-from"><!-- 中间内容 -->
						<el-form :model="addForm" label-width="80px" size="small">
							<el-row>
								<el-col :span="11">
									<el-form-item label="用户名" prop="user_name">
										<el-input v-model="addForm.user_name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="昵称" prop="user_nickname">
										<el-input v-model="addForm.user_nickname"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="密码" prop="user_password">
										<el-input v-model="addForm.user_password"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="用户分类" prop="user_kind">
										<el-select v-model="addForm.user_kind" placeholder="请选择用户分类">
											<el-option v-for="i in usersKinds" :label="i.constant_term_meaning" :value="i.constant_term_id" :key="i.constant_term_id"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="积分" prop="user_point">
										<el-input v-model="addForm.user_point"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="真实姓名" prop="user_true_name">
										<el-input v-model="addForm.user_true_name"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="生日" prop="birthday">
										<el-date-picker type="date" placeholder="选择日期" v-model="addForm.birthday" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="性别" prop="sex">
										<el-input v-model="addForm.sex"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="电话" prop="telephone">
								<el-input v-model="addForm.telephone"></el-input>
							</el-form-item>
							<el-row>
								<el-col :span="11">
									<el-form-item label="照片">
										<el-upload ref="addPicUpload" action="" list-type="picture-card" :limit="1" :class="{hide:addPicHideUpload}" :on-change="addPicChangeImg"
										           :on-remove="addPicHandleRemove" :auto-upload="false" :file-list="addPicFileList" :multiple="false">
											<i class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="头像">
										<el-upload ref="addImgUpload" action="" list-type="picture-card" :limit="1" :class="{hide:addImgHideUpload}" :on-change="addImgChangeImg"
										           :on-remove="addImgHandleRemove" :auto-upload="false" :file-list="addImgFileList" :multiple="false">
											<i class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
			    <el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit(addForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
			<!-- 编辑弹出窗 -->
			<div class="user-dialog" >
				<el-dialog
					title="编辑用户"
					:visible.sync="editDialogVisible"
					width="600px"
					top="6vh"
				>
					<div class="user-dialog-from"><!-- 中间内容 -->
						<el-form :model="editForm" label-width="80px" size="small">
							<el-row>
								<el-col :span="11">
									<el-form-item label="用户名" prop="user_name">
										<el-input v-model="editForm.user_name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="昵称" prop="user_nickname">
										<el-input v-model="editForm.user_nickname"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="密码" prop="user_password">
										<el-input v-model="editForm.user_password"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="用户分类" prop="user_kind">
										<el-select v-model="editForm.user_kind" placeholder="请选择用户分类">
											<el-option v-for="i in usersKinds" :label="i.constant_term_meaning" :value="i.constant_term_id" :key="i.constant_term_id"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="积分" prop="user_point">
										<el-input v-model="editForm.user_point"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="真实姓名" prop="user_true_name">
										<el-input v-model="editForm.user_true_name"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="11">
									<el-form-item label="生日" prop="birthday">
										<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="editForm.birthday" style="width: 100%;"></el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="性别" prop="sex">
										<el-input v-model="editForm.sex"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="电话" prop="telephone">
								<el-input v-model="editForm.telephone"></el-input>
							</el-form-item>
							<el-row>
								<el-col :span="11">
									<el-form-item label="照片">
										<el-upload ref="editPicUpload" action="" list-type="picture-card" :limit="1" :class="{hide:editPicHideUpload}" :on-change="editPicChangeImg"
										           :on-remove="editPicHandleRemove" :auto-upload="false" :file-list="editPicFileList" :multiple="false">
											<img :src="`http://localhost:8080/res/${editForm.user_picture}`" height="146px" width="146px" style="opacity:0.5;"/>
										</el-upload>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="头像">
										<el-upload ref="editImgUpload" action="" list-type="picture-card" :limit="1" :class="{hide:editImgHideUpload}" :on-change="editImgChangeImg"
										           :on-remove="editImgHandleRemove" :auto-upload="false" :file-list="editImgFileList" :multiple="false">
											<img :src="`http://localhost:8080/res/${editForm.head_img}`" height="146px" width="146px" style="opacity:0.5;"/>
										</el-upload>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
			    <el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editSubmit(editForm)">确 定</el-button>
			  </span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import FoodService from "@/views/Food/FoodService";
	import ConstantService from "@/views/Constant/ConstantService";
	import UserService from "@/views/User/UserService";
	import tools from "@/utils/tools";
  export default {
    name: "User",
    data(){
      return{
        searchForm:{
          user_kind:null,
          user_name:''
        },
        addForm:{
					user_picture:'',
	        head_img:''
        },
        editForm:{
          user_picture:'',
          head_img:''
        },
	      //图片相关
        addImgFileList:[],
        addPicFileList:[],
        editImgFileList:[],
        editPicFileList:[],
        tableData:[],
        usersKinds:[],
	      //分页相关
        total:100,
        currentPage:1,
        pageSize:5,
	      //弹出框相关
        addDialogVisible:false,
        editDialogVisible:false,
	      //图片相关
        addImgHideUpload:false,
        addPicHideUpload:false,
        editImgHideUpload:false,
        editPicHideUpload:false,

        delButton:true,
        tableSelect:[]
      }
    },
    methods:{
      //提交搜索表单
      searchSubmit(){
        this.pageNum=1;
        this.searchUser();
      },
      //批量删除
      delSelect(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //console.log(this.tableSelect);
          let list = this.tableSelect.map(item=>{
            return item.user_id;
          });
          UserService.delUserAllService({
            delete_list: list
          },r=>{
            this.$message({
              type: 'success',
              message: `删除${r.deletenum}条数据`
            });
            this.searchUser();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //增加
      addUser(){
        this.addDialogVisible=true;
      },
      //编辑
      editClick(row){
        this.editDialogVisible=true;
        //console.log(row);
        this.editForm=row;

      },
      //单删
      delClick(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          UserService.delUserService({
            user_id:row.user_id
          },r=>{
            if(r.deletenum==1){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
            this.searchUser();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //页面跳转
      currentChange(val){
        this.pageNum=val;
        this.searchUser();
      },
      //页面大小改变
      handleSizeChange(val){
        this.pageSize=val;
        this.pageNum=1;
        this.searchUser();
      },
      //提交添加表单
      addSubmit(addForm){
        this.addDialogVisible = false;
        this.addPicFileList = this.$refs.addPicUpload.uploadFiles;
        this.addImgFileList = this.$refs.addImgUpload.uploadFiles;
        this.upload(this.addPicFileList,res1=> {
          addForm.user_picture = res1;
          this.upload(this.addImgFileList, res2 => {
            addForm.head_img = res2;
            UserService.addUserService(
              addForm
              , r => {
                console.log(r)
                if (r.Insert) {
                  this.$message({
                    type: 'success',
                    message: '提交成功!'
                  });
                } else {
                  this.$message({
                    type: 'error',
                    message: '提交失败!'
                  });
                }
                this.searchUser();
              });
          })
        })
      },
      editSubmit(editForm){
        this.editDialogVisible = false;
        this.editPicFileList = this.$refs.editPicUpload.uploadFiles;
        this.editImgFileList = this.$refs.editImgUpload.uploadFiles;
        editForm.birthday=editForm.birthday.toString().substring(0,10);
        editForm.register_date=editForm.register_date.toString().substring(0,10);
        this.upload(this.editPicFileList,res1=> {
          if(res1!=''){
            editForm.user_picture = res1;
          }
          this.upload(this.editImgFileList, res2 => {
            if(res2!=''){
              editForm.head_img = res2;
            }
            UserService.editUserService(
              editForm
              , r => {
                if (r) {
                  this.$message({
                    type: 'success',
                    message: '提交成功!'
                  });
                } else {
                  this.$message({
                    type: 'error',
                    message: '提交失败!'
                  });
                }
                this.searchUser();
              });
          })
        })
      },
			//表格选择改变回调
      searchChange(select){
        //console.log(select);
        this.tableSelect = select;
        this.delButton = select.length == 0;
      },
      //搜索方法
      searchUser(){
        console.log(`搜索ing：名称：${this.searchForm.user_name}分类：${this.searchForm.user_kind}当前页：${this.pageNum}`)
        UserService.searchUserService({
          user_true_name:this.searchForm.user_name,
          user_kind:this.searchForm.user_kind,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },r=>{
          this.tableData = r.userList.list;
          this.total = r.userList.total;
        })
      },
      //上传图片
      upload(fileList,callback){
        let formData = new FormData();
        let result = fileList.map(obj => {
          return obj.raw
        });
        result.forEach(function(file) {
          formData.append('mpfs', file, file.name);
        })
        if(formData.has('mpfs')){
          FoodService.uploadService(formData, r => {
            //console.log(r.picName);
            callback(r.picName);
          });
        }else{
          callback('');
        }
      },
	    //以下有关图片样式
      addImgChangeImg(file,fileList){
        this.addImgHideUpload = fileList.length >= 1;
      },
      addImgHandleRemove(file,fileList){
        this.addImgHideUpload = fileList.length >= 1;
      },
      addPicChangeImg(file,fileList){
        this.addPicHideUpload = fileList.length >= 1;
      },
      addPicHandleRemove(file,fileList){
        this.addPicHideUpload = fileList.length >= 1;
      },
      editImgChangeImg(file,fileList){
        this.editImgHideUpload = fileList.length >= 1;
      },
      editImgHandleRemove(file,fileList){
        this.editImgHideUpload = fileList.length >= 1;
      },
      editPicChangeImg(file,fileList){
        this.editPicHideUpload = fileList.length >= 1;
      },
      editPicHandleRemove(file,fileList){
        this.editPicHideUpload = fileList.length >= 1;
      },
    },
    created(){
			ConstantService.selectConstantNoPageService({
        constant_term_kind:1
			},r=>{
				this.usersKinds=r.searchByConstantTermList;
			})
      this.searchForm.user_name='';
      this.searchForm.user_kind=null;
      this.pageNum=1;
      this.pageSize=5;
      this.searchUser();
    }
  }
</script>

<style lang="less">

	@import '../../style/Common.less';

	.user-a{
		padding: 20px;
	}
	.user-search{
		color: #606266;
		font-weight:bold;
	}
	.user-buttons{
		display: flex;
		> div{
			margin: 0 12px 20px 12px;
		}
	}
	.user-table{

	}
	.user-page{
		height: 32px;
		margin: 20px 20px 0 0;
		float: right;
	}
	.user-dialog{
		.user-dialog-from{
			padding: 0 20px;
		}
	}

	.hide .el-upload--picture-card {
		display: none;
	}
</style>